 <template>
  <div class="emergencyTask-vue">
    <div class="main">
      <div class="task-map-wrapper">
        <CCardHeader>
          <strong class="title">数据清单</strong>
        </CCardHeader>
        <div>
          <div style="background: white; margin-top: 0px">
            <Table
              ref="selectionTask"
              class="DataListTable"
              v-show="true"
              border
              height="400"
              max-height="500"
              :columns="getColumnTask"
              :data="taskDataTable"
            >
            </Table>
          </div>
          <!-- <CCardFooter class="page-link">
            <CRow>
              <CCol class="footerPage1" style>
                <span class="pageContent1">
                  每页<CSelect
                    @change="getVendorId($event)"
                    :options="[10, 15, 20, 25]"
                    v-model="pageSize"
                    class="selectStyle1"
                    style
                  />条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                    this.allNum
                  }}条记录)
                </span>
                <CPagination
                  :activePage.sync="currentPage"
                  :pages="total"
                  align="end"
                  v-if="total != 0"
                />
              </CCol>
            </CRow>
          </CCardFooter> -->
        </div>

        <div class="left-block1">
          <CCardHeader>
            <strong class="title">柱状图显示</strong>
          </CCardHeader>
          <div class="bar-chart-box">
            <div id="barChart" class="barCharts"></div>
          </div>
        </div>
        <div class="right-block1">
          <CCardHeader>
            <strong class="title">折线图显示</strong>
          </CCardHeader>
          <div class="line-chart-box">
            <div id="lineChart" class="lineCharts"></div>
            <!-- <div id="barChart" class="barCharts"></div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//import Legend from "../../views/Legend";
export default {
  data() {
    return {
      pageSize: 15,
      currentPage: 1,
      pages: 0,
      total: 0,
      allNum: 0,
      allDataList: [],
      L1AData: 0,
      L4Data: 0,
      L5Data: 1,
      L6Data: 1,
      taskDataTable: [],
      BarOptions: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        color:['#67b9a5'],
        legend: {
          data: ["数据(景数)"],
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: [
            "原始影像产品",
            "正射产品",
            "要素遥感监测产品",
            "应急风险监测产品",
          ],
        },
        series: [
          {
            name: "数据(景数)",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [],
          },
          // {
          //   name: "实际使用数据",
          //   type: "bar",
          //   stack: "总量",
          //   label: {
          //     show: true,
          //     position: "insideRight",
          //   },
          //   data: [15, 21, 20, 15, 19, 33, 41],
          // },
          // {
          //   name: "相关数据",
          //   type: "bar",
          //   stack: "总量",
          //   label: {
          //     show: true,
          //     position: "insideRight",
          //   },
          //   data: [82, 83, 90, 93, 129, 133, 132],
          // },
        ],
      },
      pieOptions: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 10,
          left: "center",
          data: [
            "原始影像",
            "正射产品",
            "水体监测",
            "灾害范围监测",
            "农作物损毁监测",
            "房屋损毁监测",
            "道路损毁监测",
          ],
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                value: 1548,
                name: "原始影像",
              },
              { value: 535, name: "正射产品" },
              { value: 510, name: "水体监测" },
              { value: 634, name: "灾害范围监测" },
              { value: 735, name: "农作物损毁监测" },
              { value: 735, name: "房屋损毁监测" },
              { value: 735, name: "道路损毁监测" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      lineOptions: {
        // title: {
        //   text: "堆叠区域图",
        // },
        color:['#67b9a5'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["数据(景数)"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "原始影像产品",
              "正射产品",
              "要素遥感监测产品",
              "应急风险监测产品",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数据(景数)",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [],
          },
          // {
          //   name: "实际使用数据",
          //   type: "line",
          //   stack: "总量",
          //   areaStyle: {},
          //   data: [15, 21, 20, 15, 19, 33, 41],
          // },
          // {
          //   name: "相关数据",
          //   type: "line",
          //   stack: "总量",
          //   areaStyle: {},
          //   data: [82, 83, 90, 93, 129, 133, 142],
          // },
        ],
      },
      disasterTaskID: "",
    };
  },
  mounted() {
    this.disasterTaskID = this.$route.query.id;
    this.taskInfoTable();
  },
  watch: {
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      //this.getAuto();
      this.getPageData(this.allDataList);
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      //this.getAuto();
      this.getPageData(this.allDataList);
    },
  },
  computed: {
    getColumnTask() {
      return [
        {
          key: "number",
          resizable: true,
          title: "序号",
          align: "center",
          width: "100",
        },

        {
          key: "productName",
          title: "产品名称",
          align: "center",
          width: "200",
          resizable: true,
        },
        {
          key: "ProductLevel",
          title: "产品级别",
          align: "center",
          width: "280",
          resizable: true,
        },
        // {
        //   key: "UseData",
        //   title: "实际使用数据(景)",
        //   align: "center",
        //   width: "200",
        //   resizable: true,
        // },

        {
          key: "relatedData",
          title: "数据(景数)",
          align: "center",
          width: "160",
          resizable: true,
        },
      ];
    },
  },
  components: {
    //Legend,
  },
  methods: {
    //表格分页
    getPageData(AllData) {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      this.data = [];
      let beginIndex = (currentPage - 1) * pageSize;
      let lastIndex = currentPage * pageSize - 1; //9
      for (let i = beginIndex; i < AllData.length; i++) {
        let temp = AllData[i];

        if (i > lastIndex) break;
        this.data.push(temp);
      }

      this.allNum = AllData.length;
      this.total = Math.ceil(AllData.length / this.pageSize);
      for (let i = 0; i < AllData.length; i++) {
        if (i > lastIndex) break;
        this.data[i].number = (this.currentPage - 1) * this.pageSize + i + 1;
      }
    },
    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
    },
    taskInfoTable() {
      let path =
        this.$api.taskManageApi.queryAssociateDataByDisasterTaskId +
        `${this.disasterTaskID}`;
      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          let dataList = res.data.data;
          let tempData = [];
          let dataL1A = 0;
          let dataL4 = 0;
          let dataL5 = 1;
          let dataL6 = 1;
          for (let i = 0; i < dataList.length; i++) {
            let data = dataList[i];
            if (data.level == "LEVEL1A" || data.level == "L1A") {
              dataL1A++;
              this.L1AData = dataL1A;
            } else if (data.level == "LEVEL4" || data.level == "L4") {
              dataL4++;
              this.L4Data = dataL4;
            } else if (data.level == "LEVEL5" || data.level == "L5") {
              dataL5++;
              this.L5Data = dataL5;
            } else {
              dataL6++;
              this.L6Data = dataL6;
            }
          }

          tempData.push({
            number: 1,
            ProductLevel: "LEVEL1A",
            productName: "原始影像产品",
            relatedData: dataL1A,
          });
          tempData.push({
            number: 2,
            ProductLevel: "LEVEL4",
            productName: "正射影像产品",
            relatedData: dataL4,
          });
          tempData.push({
            number: 3,
            ProductLevel: "LEVEL5",
            productName: "要素遥感监测产品",
            relatedData: dataL5,
          });
          tempData.push({
            number: 4,
            ProductLevel: "LEVEL6",
            productName: "应急风险监测产品",
            relatedData: dataL6,
          });

          this.taskDataTable = tempData;
          this.initBarChart();
          //this.initPieChart();
          this.initlineChart();
          //this.getPageData(this.allDataList);
        } else {
          this.$Message.error("查询失败");
        }
      });
    },
    initBarChart() {
      let barData = [];
      let lineData = [];
      barData.push(this.L1AData);
      barData.push(this.L4Data);
      barData.push(this.L5Data);
      barData.push(this.L6Data);

      lineData.push(this.L1AData);
      lineData.push(this.L4Data);
      lineData.push(this.L5Data);
      lineData.push(this.L6Data);

      this.BarOptions.series[0].data = barData;
      this.lineOptions.series[0].data = lineData;
      let columm = this.$echarts.init(document.getElementById("barChart"));
      columm.setOption(this.BarOptions);
    },
    initPieChart() {
      let columm = this.$echarts.init(document.getElementById("pieChart"));
      columm.setOption(this.pieOptions);
    },
    initlineChart() {
      let columm = this.$echarts.init(document.getElementById("lineChart"));
      columm.setOption(this.lineOptions);
    },
  },
};
</script>
<style scoped>
.main {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  background: #e8e8e8;
  margin-bottom: 10px;
  height: 880px;
}
.bar-chart-box {
  flex: 1;
  height: 100%;
}
.barCharts {
  width: 100%;
  height: 100%;
}
.line-chart-box {
  flex: 1;
  height: 100%;
}
.lineCharts {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 1px;
}
.legendstyle {
  display: flex;
  position: absolute;
  z-index: 2;
  bottom: 104px;
  margin-left: 18px;
}

span {
  margin-left: 7px;
}

.descRow {
  width: 100%;
  margin: 5px 2px;
}
.desc-select {
  width: 96%;
}
.btn {
  margin-left: 5px;
  margin-right: 5px;
  width: 68px;
  height: 28px;
}
.btn-sm {
  margin-left: 5px;
  margin-right: 5px;
  width: 48px;
  height: 31px;
}
.inputcommon {
  /* margin: 3px 2px; */
  margin: 3px 1px !important;
}
.regionBlock {
  display: flex;
  margin-top: 10px;
  margin-left: 12px;
}

.batchSelect {
  width: 97%;
  height: 130px;
  overflow: auto;
  border: none;
  margin-left: 10px;
}
.rightIcon {
  position: absolute;
  right: 0px;
  width: 22px;
  height: 22px;
}
.task-monitorTable-row {
  margin-top: 45px;
  background: rgba(255, 255, 255, 1);
}
.inputRadio {
  display: inline-block;
  width: 36%;
  margin-left: 18px;
}
.selectimgstyle {
  width: 4px;
  height: 18px;
  margin-top: -4px;
  margin-left: 15px;
}

.tab-title {
  width: 120px;
  height: 25px;
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 25px;
}

/* ********** */
.tab-header {
  position: relative;
  top: 10px;

  width: 100%;
  display: flex;
  border-bottom: 1px solid rgba(221, 228, 237, 1);
}

.left-group1 {
  width: 180px;
}

.carouse {
  border-radius: 5px;
  position: relative;
  height: 177px;
  width: 100%;
  margin-top: 10px;
  background-color: white;
  border: 1px solid #dde4ed;
}

.mapselect {
  display: flex;
  position: absolute;
  z-index: 2;
  width: auto;
  height: auto;
  margin-left: 20px;
  top: 20px;
  border-radius: 5px;
}
.cityselect {
  height: 35px;
  width: 322px;
  float: left;
  background: rgba(37, 37, 37, 0.5);
  color: #d0d0d0;
  border-radius: 5px;
}

.timeselect {
  height: 35px;
  float: right;
  width: 465px;
  margin-left: 16px;
  background: rgba(37, 37, 37, 0.5);
  color: #d0d0d0;
  border-radius: 5px;
}

.timeselect .btn.info {
  height: 26px;
}

.timeselect .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.adminfontsize {
  font-size: 13px;
}

.el-button.is-round {
  border-radius: 6px;
  padding: 12px 23px;
  margin-left: 5px;
}

.demonstration {
  margin-left: 10px;
}

.bg {
  background: rgba(255, 255, 255, 0.78);
  color: #383838;
  border-color: #fff;
}

/* 媒体查询1366 */
@media (min-width: 1366px) and (max-width: 1600px) {
}

.carouseSty {
  position: relative;
  width: 1395px;
  margin-left: 43px;
}
.lineChart {
  width: 92%;
  height: 400px;
  left: 50px;
}
.task-map-wrapper {
  position: relative;
  background-color: #e8e8e8;
  height: auto;
  width: 100%;
  margin-left: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.right-block1 {
  display: flex;
  width: 50%;
  background: white;
  margin-top: 0px;
  height: 450px;
  position: relative;
  left: 50%;
  top: -51.5%;
}
.left-block1 {
  display: flex;
  width: 50%;
  background: white;
  margin-top: 0px;
  height: 450px;
}
.DataListTable {
  max-width: 740px;
}
</style>